<template>
	<view>

		<view class="pres-top">
			<!-- 登录状态 用户头像用户名 -->
			<view class="pres-top-contner" v-if="userData.status==1">
				<view @tap="Information" class="pers-top-userimage">
					<image :src="'https://z3.ax1x.com/2021/05/06/glLxRH.jpg' || userData.salt" mode=""
						class="userimage">
					</image>
				</view>
				<view class="pers-top-usertext">
					<view class="pers-username">{{userData.nickName}}</view>
					<view class="pers-usertext">
						<view class="pers-cond">理财达人</view>
						<navigator v-if="userData.idcard==''" url="/pages/IdentAuthen/IdentAuthen" class="pers-name">未实名
							<image src="https://z3.ax1x.com/2021/04/22/cOPIdH.png" mode="" class="name-log"></image>
						</navigator>
						<view class="pers-name" v-if="userData.idcard!=''" @tap="showname">已实名 <image
								src="https://z3.ax1x.com/2021/04/27/gCka5t.png" mode="" class="name-log"></image>
						</view>

					</view>
				</view>
				<view class="pers-top-log">
					<image src="https://z3.ax1x.com/2021/04/22/cOPfsO.png" mode="" class="pers-right-log"></image>
					<text>签到</text>
				</view>
			</view>

			<!-- 未登录状态 用户头像用户名 -->
			<view class="pres-top-contner" v-if="userData.status==0">
				<view class="pers-top-userimage">
					<image src="https://z3.ax1x.com/2021/04/22/cOiew4.jpg" mode="" class="userimage"></image>
				</view>
				<view class="pers-top-usertext">
					<view class="pers-username">欢迎来到祥瑞金融</view>
					<view class="pers-usertext">
						<view class="pers-cond" id="actives">蜗牛旗下金融科技服务平台</view>
					</view>
				</view>
				<navigator url="/pages/login/login" class="login">
					<text>登录</text>
				</navigator>
			</view>




			<!-- 用户积分账单银行卡 -->
			<view class="pers-user-option">
				<view class="user-integral" @tap="integral">
					<text class="number">{{userData.integral}}</text><br>
					<text class="myinformation">我的积分</text>
				</view>
				<view class="user-bill" @tap="mybill">
					<text class="number">{{bill}}</text><br>
					<text class="myinformation">我的账单</text>
				</view>
				<view class="user-legal" @tap="coupons">
					<text class="number">0</text><br>
					<text class="myinformation">优惠卷</text>
				</view>
				<view class="user-bank" @tap="mybalance">
					<text class="number">{{userData.balance}}</text><br>
					<text class="myinformation">我的余额</text>
				</view>
			</view>
		</view>

		<!-- 我的资产大盒子 -->
		<view class="my-postion">
			<!-- 我的资产 -->
			<view class="my-assets">
				<view class="my-assets-top">
					<view class="top-left">
						<text class="top-left-text">我的资产</text>
						<image src="https://z3.ax1x.com/2021/04/22/cOpPKg.png" mode="" class="top-left-log"
							@tap="defulData=!defulData"></image>
					</view>
					<view class="top-right">
						<text class="top-right-text">账户保障可升级</text>
						<image src="https://z3.ax1x.com/2021/04/22/cOPso9.png" mode="" class="top-right-log"></image>
					</view>
				</view>

				<view class="my-assets-middle">
					<view @tap="totalAssets" class="middle-left">
						<text class="textone">总资产</text><br>
						<view class="">
							<view class="texttwo" v-if="defulData">{{sumOverAllBalance || '0.00'}}</view>
							<view class="texttwo" v-if="!defulData">***</view>
						</view>
						<view class="margin-top">
							<text class="textthree" v-if="defulData">昨日收益 {{todaySumEarnings || '0.00'}}</text>
							<text class="textthree" v-if="!defulData">昨日收益 ***</text>
						</view>
					</view>
					<view class="middle"></view>
					<view @tap="notYet" class="middle-right">
						<text class="textone">总待还</text><br>
						<view class="">
							<view class="texttwo" v-if="defulData">0.00</view>
							<view class="texttwo" v-if="!defulData">***</view>
						</view>
						<view class="textthree margin-top">暂无代还款项</view>
					</view>
				</view>

				<view class="my-assets-bottom">
					<view class="bottom-box postion" @tap="notYet">
						<text class="bottom-textone">白条额度</text><br>
						<text class="bottom-texttwo">充话费减20</text>

						<view class="bottom-postion">领额度</view>
					</view>

					<view class="bottom-box" @tap="showtab">
						<text class="bottom-textone">可借现金</text><br>
						<text class="bottom-texttwo">最高20万</text>
					</view>
					<view class="bottom-box" @tap="notYet">
						<text class="bottom-textone">我的保险</text><br>
						<text class="bottom-texttwo">0项保障中</text>
					</view>
					<view class="bottom-box" @tap="mybill">
						<text class="bottom-textone">我的账单</text><br>
						<text class="bottom-texttwo">暂无交易</text>
					</view>
				</view>
			</view>

			<!-- 专属权益 -->
			<view class="exclusive-title">
				<view class="title-box"></view>
				<text class="title">专属权益</text>
			</view>
			<view class="exclusive-item">
				<view class="item-box" @tap="notYet">
					<image src="https://z3.ax1x.com/2021/04/22/cO9FSK.png" mode="" class="item-image"></image>
					<view class="item-text">理财体验金</view>
					<view class="item-minbox">福利</view>
				</view>
				<view class="item-box" @tap="notYet">
					<image src="https://z3.ax1x.com/2021/04/22/cLzWff.png" mode="" class="item-image"></image>
					<view class="item-text">医疗急救卡</view>
				</view>
				<view class="item-box" @tap="notYet">
					<image src="https://z3.ax1x.com/2021/04/22/cLzhp8.png" mode="" class="item-image"></image>
					<view class="item-text">天天有奖</view>
					<view class="item-minbox">限时</view>
				</view>
				<view class="item-box" @tap="notYet">
					<image src="https://z3.ax1x.com/2021/04/22/cLz41S.png" mode="" class="item-image"></image>
					<view class="item-text">我的客服</view>
				</view>
			</view>


			<!-- 我的服务 -->
			<view class="my-service">
				<view class="service-box"></view>
				<text class="service">我的服务</text>
			</view>

			<view class="my-service-item">
				<view class="service-item" v-for="item in serviceData" :key="item._id" @tap="service(item._id)">
					<view class="service-item-left">
						<image :src="item.leftImage" mode="" class="item-left-image"></image>
						<text>{{item.text}}</text>
					</view>
					<image :src="item.rightImage" mode="" class="item-right-image"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('UserInfor')
	const {
		mapActions: payMapActions
	} = createNamespacedHelpers('payCurrent')
	export default {
		created() {
			this.getToken()
		},
		async onShow() {
			if (this.userData.token != '') {
				const data = await this.totalRevenueData(this.userData)
				// console.log(data);
				this.sumOverAllBalance = data.data.sumOverAllBalance
				this.todaySumEarnings = data.data.todaySumEarnings
				
				const paydata = await this.getCurrentAssent({
					userName: this.userData.username
				})
				// console.log(paydata.data.memberCurrentAccounts);
				paydata.data.memberCurrentAccounts.forEach((item, index) => {
					// console.log(item.overAllBalance);
					if (item.overAllBalance > 0) {
						// console.log(index+1);
						this.bill = index + 1
					}
				})
			}

		},
		data() {
			return {
				bill: 0,
				sumOverAllBalance: 0, ///总余额
				todaySumEarnings: 0, ///昨日收益
				defulData: true,
				serviceData: [{
						_id: 1,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPFqe.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '实名认证'
					},
					{
						_id: 2,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPVIA.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '安全服务'
					},
					{
						_id: 3,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPePI.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '信用评价'
					},
					{
						_id: 4,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPmGt.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '隐私设置'
					},
					{
						_id: 5,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPuxf.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '辅助功能'
					},
					{
						_id: 6,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPtGq.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '帮助反馈'
					},
					{
						_id: 7,
						leftImage: 'https://z3.ax1x.com/2021/04/22/cOPdMT.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '关于'
					},
				]
			}
		},
		computed: {
			...mapState(['userData'])
		},
		methods: {
			...payMapActions(['getCurrentAssent']),
			...mapActions(['getToken', 'totalRevenueData']),
			////跳转总资产
			totalAssets() {
				// console.log(this.token);
				if (this.userData.token) {
					uni.navigateTo({
						url: '/pages/personal/my-assets/my-assets'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			///实名提示
			showname() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放此功能',
					duration: 2000
				});
			},
			///跳转个人信息
			Information() {
				uni.navigateTo({
					url: "/pages/personal/personalData/personalData"
				});
			},
			///跳转我的账单
			mybill() {
				if (this.userData.token != '') {
					uni.navigateTo({
						url: '/pages/myBill/myBill'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			////跳转优惠卷
			coupons() {
				if (this.userData.token != '') {
					uni.navigateTo({
						url: '/pages/coupons/coupons'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			///跳转积分
			integral() {
				if (this.userData.token != '') {
					uni.navigateTo({
						url: '/pages/integral/integral'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			///跳转余额
			mybalance() {
				if (this.userData.token) {
					uni.navigateTo({
						url: '/pages/balance/balance'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			///实名认证
			service(id) {
				if (this.userData.token == '') {
					uni.navigateTo({
						url: '../login/login'
					})
				} else if (this.userData.token && id == 1) {
					uni.navigateTo({
						url: '/pages/IdentAuthen/IdentAuthen'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂未开放此功能',
						duration: 2000
					});
				}
			},
			///可借额度
			showtab() {
				if (this.userData.token) {
					uni.switchTab({
						url: '/pages/borrow/borrow'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			///未开放功能
			notYet() {
				if (this.userData.token) {
					uni.showToast({
						icon: 'none',
						title: '暂未开放此功能',
						duration: 2000
					});
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			}


		},
	}
</script>

<style>
	#actives {
		border: none;
		padding-left: 0rpx;
	}

	.login {
		margin-right: 25rpx;
		margin-top: 15rpx;
		width: 300rpx;
		height: 70rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 900;
		color: #3476F1;
	}

	.pres-top {
		background-color: #3476F1;
		height: 420rpx;
		border-bottom-right-radius: 50rpx;
		position: relative;
	}

	/* ///<!-- 用户头像用户名 --> */
	.pres-top-contner {
		width: 718rpx;
		height: 112rpx;
		/* border: 1rpx solid red; */
		position: absolute;
		right: 0rpx;
		display: flex;
		margin-top: 8rpx;
	}

	.pers-top-userimage {
		width: 112rpx;
		height: 112rpx;
		/* border: 1rpx solid red; */
		border-radius: 50%;
		background-color: #FFFFFF;

	}

	.userimage {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}

	.pers-top-usertext {
		width: 100%;
		height: 112rpx;
		/* border: 1rpx solid red; */

	}

	.pers-username {
		width: auto;
		height: 40rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 26rpx;
		/* border: 1rpx solid red; */
	}

	.pers-usertext {
		width: auto;
		height: 35rpx;
		/* border:  1rpx solid red; */
		margin-left: 26rpx;
		display: flex;
		margin-top: 25rpx;
	}

	.pers-cond {
		width: auto;
		padding: 0rpx 15rpx;
		height: 35rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 40rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 35rpx;
		color: #FFFFFF;
	}

	.pers-name {
		padding-left: 15rpx;
		width: auto;
		height: 35rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 40rpx;
		text-align: right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 35rpx;
		color: #FFFFFF;
		margin-left: 13rpx;
	}

	.name-log {
		width: 20rpx;
		height: 20rpx;
		float: right;
		margin: 6rpx 15rpx 0rpx 5rpx;
	}


	.pers-top-log {
		margin-top: 32rpx;
		width: 190rpx;
		height: 45rpx;
		background: #FFC364;
		opacity: 1;
		border-radius: 20px 0px 0px 20px;
		font-size: 25rpx;
		line-height: 45rpx;
		color: #F85656;
	}

	.pers-right-log {
		width: 20rpx;
		height: 22rpx;
		float: left;
		margin: 10rpx 8rpx 0rpx 30rpx;
	}

	.pers-user-option {
		width: 750rpx;
		height: 110rpx;
		/* border: 1rpx solid red; */
		position: absolute;
		top: 168rpx;
		display: flex;
		flex-grow: 1;
	}

	.pers-user-option>view {
		width: 100%;
		height: 108rpx;
		/* border: 1rpx solid red; */
		text-align: center;
		color: #FFFFFF;
	}

	.myinformation {
		font-size: 26rpx;
		font-family: PingFang SC;
	}

	.number {
		font-family: Lato;
		font-weight: bold;
		font-size: 42rpx;
	}





	.my-postion {
		position: absolute;
		top: 310rpx;
		width: 100%;
		height: auto;
	}

	/* 我的资产 */
	.my-assets {
		/* border: 1px solid red; */
		margin: 0rpx auto;
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
	}


	.my-assets-top {
		width: 100%;
		height: 88rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		display: flex;
		/* border: 1px solid red; */
	}

	/*我的资产 */

	.top-left {
		width: 390rpx;
		height: 88rpx;
		/* border: 1rpx solid red; */
		padding-left: 40rpx;
	}

	.top-left-log {
		width: 30rpx;
		height: 25rpx;
		margin-left: 12rpx;
		/* border: 1px solid red; */
	}


	.top-left-text {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 88rpx;
		color: #333333;
	}

	/* 账户保护可升级 */
	.top-right {
		width: 390rpx;
		height: 88rpx;
		/* border: 1rpx solid red; */
		text-align: right;
	}

	.top-right-log {
		width: 46rpx;
		height: 46rpx;
		float: right;
		margin-top: 20rpx;
		margin-right: 30rpx;
		margin-left: 0rpx;
	}

	.top-right-text {
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 88rpx;
		color: #E2BC7F;
	}


	.my-assets-middle {
		/* border: 1px solid red; */
		width: 100%;
		height: auto;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		display: flex;
		flex-grow: 1;
	}

	.middle-left {
		width: 300rpx;
		height: auto;
		/* border: 1rpx solid red; */
		padding: 20rpx 0rpx 20rpx 40rpx;
	}

	.middle {
		/* border: 1px solid red; */
		width: 1rpx;
		height: 108rpx;
		border-right: 1rpx solid #000000;
		opacity: 0.04;
		margin-top: 45rpx;

	}

	.middle-right {
		width: 300rpx;
		height: auto;
		/* border: 1rpx solid red; */
		padding: 20rpx 0rpx 20rpx 40rpx;
	}

	.textone {
		/* border: 1px solid red; */
		color: #333333;
		font-size: 26rpx;
		font-family: PingFang SC;
	}

	.texttwo {
		/* border: 1px solid red; */
		color: #333333;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.textthree {
		/* border: 1px solid red; */
		font-family: PingFang SC;
		font-size: 28rpx;
		color: #999999;
	}

	.margin-top {
		margin-top: 15rpx;
	}

	.my-assets-bottom {
		width: 100%;
		height: 116rpx;
		/* border: 1px solid red; */
		display: flex;
	}

	.bottom-box {
		width: 100%;
		height: 100rpx;
		/* border: 1px solid red; */
		padding: 15rpx 0rpx 0rpx 20rpx;
	}

	.bottom-textone {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bottom-texttwo {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.postion {
		position: relative;
	}

	.bottom-postion {
		width: 69rpx;
		height: 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 8px;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		/* border: 1px solid red; */
		background: url('https://z3.ax1x.com/2021/04/22/cOCT2V.png') no-repeat;
		background-size: 69rpx 30rpx;
		font-size: 16rpx;
		text-align: center;
		line-height: 30rpx;
		color: #FFFFFF;
	}



	/* <!-- 专属权益 --> */
	.exclusive-title {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		line-height: 100rpx;
	}

	.title-box {
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		border-radius: 12rpx;
		margin-top: 35rpx;
		margin-right: 10rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 100rpx;
		color: #333333;
	}

	.exclusive-item {
		width: 700rpx;
		height: 184rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
		margin: 0rpx auto;
		display: flex;
		flex-grow: 1;
	}

	.item-box {
		width: 100%;
		height: 154rpx;
		/* border: 1px solid red; */
		padding-top: 30rpx;
		text-align: center;
		position: relative;
	}

	.item-minbox {
		width: 49rpx;
		height: 30rpx;
		background: url('https://z3.ax1x.com/2021/04/22/cOCLb4.png') no-repeat;
		background-size: 49rpx 30rpx;
		text-align: center;
		font-size: 16rpx;
		line-height: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.item-image {
		width: 80rpx;
		height: 80rpx;
	}

	.item-text {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
	}


	/* 我的服务 */
	.my-service {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		line-height: 100rpx;
	}

	.service-box {
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		border-radius: 12rpx;
		margin-top: 35rpx;
		margin-right: 10rpx;
	}

	.service {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 100rpx;
		color: #333333;
	}


	.my-service-item {
		width: 700rpx;
		height: 628rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 18rpx;
		margin: 0rpx auto 40rpx;
	}

	.service-item {
		/* border: 1px solid red; */
		width: 100%;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
		display: flex;
		justify-content: space-between;
	}

	.service-item-left {
		width: 50%;
		height: 88rpx;
		/* border: 1rpx solid red; */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 88rpx;
		clear: both;
	}

	.item-left-image {
		width: 28rpx;
		height: 28rpx;
		/* border: 1rpx solid red; */
		float: left;
		margin: 28rpx 15rpx 0rpx 28rpx;
	}

	.item-right-image {
		width: 28rpx;
		height: 28rpx;
		/* border: 1rpx solid red; */
		margin: 28rpx;
	}
</style>
